<template>
  <div class="MVCardContainer">
    <div class="MVCardPic">
      <div class="MVCardPicInner">
        <div class="suqareTopInfo">
          <SvgIcon
            icon-name="iconplay"
            class-name="squareCardIcon"
            color="#fff"
          />
          <span>{{ transedPlayCount }}</span>
        </div>
        <img :src="mv.picUrl" :alt="mv.name" />
      </div>
    </div>
    <div class="MVCardInfo">
      <div class="MVCardTitle">
        {{ mv.name }}
      </div>
      <div class="MVCardArtist">
        {{ artists }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { MVModel } from "@/types/index";

const props = defineProps<{
  mv: MVModel;
}>();

const artists = computed(() => {
  let result: string[] = [];
  const trueData = props.mv?.artists;

  if (trueData instanceof Array && trueData.length > 0) {
    trueData.forEach((a) => {
      result.push(a.name);
    });
  }

  return result.join("|");
});

const transedPlayCount = computed(() => {
  let res = "";
  const playCount = props.mv.playCount;
  if (playCount < 10000) {
    res = String(playCount);
  } else if (playCount < 100000000 && playCount >= 10000) {
    res = `${Math.ceil(playCount / 10000)}万`;
  } else if (playCount >= 100000000) {
    res = `${Math.ceil(playCount / 100000000)}亿`;
  }
  return res;
});
</script>

<style scoped lang="less">
.MVCardContainer {
  cursor: pointer;
  width: 100%;
  .MVCardPic {
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
    position: relative;
    &:after {
      width: 100%;
      height: 0.1px;
      content: "";
      display: block;
      padding-top: 56.25%;
    }
    .MVCardPicInner {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      .suqareTopInfo {
        .squareCardIcon {
          width: 16px;
          height: 16px;
          margin-right: 5px;
        }
        position: absolute;
        right: 0px;
        top: 0px;
        width: 100%;
        height: 36px;
        display: flex;
        padding-top: 5px;
        justify-content: flex-end;
        padding-right: 5px;
        background-image: linear-gradient(
          rgba(0, 0, 0, 0.65),
          rgba(0, 0, 0, 0)
        );
        span {
          color: #fff;
          font-size: 12px;
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .MVCardInfo {
    .MVCardTitle {
      font-size: 14px;
      width: 100%;
      margin-top: 10px;
      color: #333;
    }
    .MVCardArtist {
      font-size: 12px;
      width: 100%;
      margin-top: 2px;
      color: #999;
    }
  }
}
</style>
